<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery_�����</title>

<style type="text/css">
img {border: none; width:148px; height:200px; margin-right:2px;}
ul,li {margin:0; padding:0;}
.ul_0 {width:auto; height:200px; float:left;}
.li_0 {width:150px; height:200px; display:inline; float:left;}
.line {height:200px;}
#demo {overflow:hidden; width:500px; height:200px; text-align:left; border:#999 solid 1px; padding:2px;}
</style>

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
</head>

<body>

<div id="demo">
    <div class="line">
        <ul class="ul_0" id="demo1">
            <li class="li_0"><a href="http://whywangsea.blog.163.com/blog/#" target="_blank"><img src="http://whywangsea.blog.163.com/blog/images/1.jpg"></a></li>
            <li class="li_0"><a href="http://whywangsea.blog.163.com/blog/#" target="_blank"><img src="http://whywangsea.blog.163.com/blog/images/2.jpg"></a></li>
            <li class="li_0"><a href="http://whywangsea.blog.163.com/blog/#" target="_blank"><img src="http://whywangsea.blog.163.com/blog/images/3.jpg"></a></li>
            <li class="li_0"><a href="http://whywangsea.blog.163.com/blog/#" target="_blank"><img src="http://whywangsea.blog.163.com/blog/images/4.jpg"></a></li>
        </ul>
        <ul class="ul_0" id="demo2"></ul>
    </div>
</div>

<script type="text/javascript">   
var speed=10;  
var demo = $("#demo");  
var demo1 = $("#demo1");  
var demo2 = $("#demo2"); 
var n = $("#demo1 li").length;
var m = $("#demo1 li").width() * n;
demo1.width(m);
$("div.line").width(2 * m);
demo2.html(demo1.html()); 
function Marquee(){
    if(demo1.width()<=demo.width()) {demo2.remove();}
    else{
        if(demo.scrollLeft()>=demo1.width()) {demo.scrollLeft(0);}
        else{demo.scrollLeft(demo.scrollLeft()+1);}    
    }      
}  
var MyMar=setInterval(Marquee,speed);
demo.mouseover(function() {  
    clearInterval(MyMar);  
}) 
demo.mouseout(function() {  
    MyMar=setInterval(Marquee,speed);  
})   
</script>

</body>
</html>